<template>
    <div style="height: 100%;width: 100%" class="custom-page-design">
        <a-tabs v-model="key" @change="tabChange">
            <template slot="tabBarExtraContent">
                <span>
                    <a-button v-if="changePageName=='CustomPageColumnEdit'" style="margin-right: 10px" @click="getPageTemplate">
                        {{i18n('isButton.columnTemplate','选择栏目模板')}}
                    </a-button>
                    <a-button type="primary" @click="onRunChange">
                        {{i18n('isButton.clickToRun','点击运行')}}
                        <a-icon type="double-right" /></a-button>
                </span>
            </template>
            <a-tab-pane key="pc" :tab="i18n('form.PCTerminal','HTML(PC端)')">
                <rx-monaco-editor
                    ref="htmlEditor"
                    language="html"
                    v-model="template"
                    v-if="load"
                >
                </rx-monaco-editor>
            </a-tab-pane>
            <a-tab-pane key="2" tab="javaScript" >

                <rx-monaco-editor
                    style="margin-top: 5px;"
                    ref="jsScriptEditor"
                    language="javascript"
                    v-model="jsScript"
                >
                    <template v-slot:monacoeditor>
                        <a-dropdown>
                            <a-menu slot="overlay"  >
                                <template v-for="item in scriptInsertAry">
                                    <a-menu-item :key="item.name"
                                                 @click="handInsertScript(item)"
                                                 v-if="!item.children"> {{item.name}} </a-menu-item>
                                    <a-sub-menu :key="item.name"  v-if="item.children && item.children.length>0">
                                        <span slot="title">{{item.name}}</span>
                                        <a-menu-item :key="subItem.name"  v-for="subItem in item.children" @click="handInsertScript(subItem)">
                                            {{subItem.name}}
                                        </a-menu-item>
                                    </a-sub-menu>
                                </template>
                            </a-menu>
                            <a-button type="primary" style="margin-left: 8px;">
                                {{i18n('isButton.insertScript','插入脚本') }}
                                <a-icon type="down" /> </a-button>
                        </a-dropdown>

                        <rx-common-script  @select="insertScript" use-to="portal-customPage" type="0" >
                            <template v-slot:button>
                                <a-button type="primary" style="margin-left: 8px;">
                                    {{i18n('isButton.insertCode','插入代码') }}
                                    <a-icon type="down" /> </a-button>
                            </template>
                        </rx-common-script>
                    </template>
                </rx-monaco-editor>
            </a-tab-pane>
            <a-tab-pane key="3" tab="CSS" >
                <rx-monaco-editor
                    ref="cssStyleEditor"
                    language="css"
                    v-model="cssStyle"
                >
                </rx-monaco-editor>
            </a-tab-pane>
            <a-tab-pane key="mobile" :tab="i18n('form.mobileTerminal','HTML(移动端)')" >
                <rx-monaco-editor
                    ref="htmlEditor"
                    language="html"
                    v-model="mobileTemplate"
                    v-if="load"
                >
                </rx-monaco-editor>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>
<script>
import {RxDialog, RxMonacoEditor,RxCommonScript} from "@lowcode/jpaas-common-lib";
import insertScript from "@/views/modules/portal/core/customPage/insertScript";
import {debounce} from "lodash-es";

export default {
    name: 'custom-page-design',
    components: {
        RxDialog,
        RxMonacoEditor,
        RxCommonScript
    },
    props:["changePage","changePageName"],
    mixins:[insertScript],
    data() {
        return {
            key:"pc",
            //pc
            template:"",
            //mobile
            mobileTemplate:"",
            jsScript:`export default {
                    props: {
                    },
                    //` +this.i18n('defaultJsDesc1', '数据定义')+`
                    data(){
                        return {
                        }
                    },
                    //` + this.i18n('defaultJsDesc2', '初始化时加载')+`
                    created(){
                    },
                    //` + this.i18n('defaultJsDesc3', '页面自定义函数') + `
                    methods:{
                    },
                    //` + this.i18n('defaultJsDesc5', '页面自定义观察函数') + `
                    watch:{}
                }`,
            cssStyle:"",
            load:false,
            scriptInsertAry:[
                /*{
                    name:this.i18n('isButton.formFunctions','表单函数'),
                    children:[{
                        name:this.i18n('isButton.openTheForm','弹窗打开表单'),
                        clickEvent:"insertFormWindow"
                    },
                    {   name:this.i18n('isButton.openMethod','使用URL方式打开表单'),
                        clickEvent:"insertFormUrl"
                    },
                    {   name:this.i18n('isButton.openFormByWindow','使用window.open方式打开表单'),
                        clickEvent:"insertFormWindowOpen"
                    },
                    {   name:this.i18n('isButton.openList','打开列表'),
                        clickEvent:"insertFormList"
                    },
                    {
                        name:this.i18n('isButton.OpenMenu','使用tab打开菜单'),
                        clickEvent:"insertOpenMenu"
                    }

                    ]
                },*/
                {
                    name:this.i18n('isButton.insertCustomQuery','插入自定义查询'),
                    clickEvent:"insertPcCustomQuery"
                },
                {
                    name:this.i18n('isButton.insertCallScript','插入调用脚本'),

                    clickEvent:"insertInvokePcScript"
                },
                {
                    name:this.i18n('isButton.insertInterface','插入第三方接口'),
                    clickEvent:"insertInvokePcInterface"
                },
                {
                    name:this.i18n('isButton.openCustomPage','打开自定义页面'),
                    clickEvent:"addOpenCustomPage"
                },
                /*{
                    name:this.i18n('isButton.insertAjax','插入Ajax'),
                    clickEvent:"insertAjax"
                },*/
            ]
        }

    },
    mounted() {
        this.$nextTick(function (){
            this.load =  true;
        })
    },
    methods: {
        getPageTemplate(){
            this.$emit('pageTemplate')
        },
        onRunChange(){
            this.$emit('runChange')
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, "customPageColumn", key);
        },
        setData(values){
            this.template=values.template;
            this.mobileTemplate=values.mobileTemplate;
            this.jsScript=values.jsScript;
            this.cssStyle=values.cssStyle;
        },
        getData(){
            return {
                template:this.template,
                mobileTemplate:this.mobileTemplate,
                jsScript:this.jsScript,
                cssStyle:this.cssStyle,
            }
        },
        //实时渲染
        onChange: debounce(function() {
            this.changePage(this.getData());
        },1000),
        tabChange(){
            if(this.key=='pc' || this.key=='mobile'){
                this.$emit("setType",this.key)
            }
        }
    },
    watch:{
    }
}
</script>
<style scoped>
.custom-page-design >>>.ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane, .ant-tabs .ant-tabs-bottom-content > .ant-tabs-tabpane{
    overflow: initial!important;
}
.custom-page-design >>> .ant-tabs-nav .ant-tabs-tab{
    padding: 12px 16px!important;
}
</style>
